import * as React from 'react'
import { Menu, Dropdown, Avatar } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import { connect } from 'umi'
import styles from './index.less'

const RightContent = ({ dispatch, user }) => {
  const { userInfo } = user

  const logout = () => {
    dispatch({
      type: 'user/logOut'
    })
  }

  const menu = (
    <Menu>
      <Menu.Item danger onClick={logout}>
        退出登录
      </Menu.Item>
    </Menu>
  )
  return (
    <div className={styles.wrapper}>
      <Avatar className={styles.avatar} src={userInfo.headimgurl} />
      <Dropdown overlay={menu}>
        <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
          <span className={styles.nickname}>{userInfo.store_name}</span>
          <DownOutlined />
        </a>
      </Dropdown>
    </div>
  )
}

const mapStateToProps = ({ user }) => ({
  user
})

export default connect(mapStateToProps)(RightContent)
